<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="author" content="yhofoodie" />
		<meta name="keywords" content="yhofoodie" />
		<meta name="description" content="yhofoodie" />
		<meta name="renderer" content="webkit" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" name="viewport" />
		<title>yhofoodie</title>
		<link rel="stylesheet" href="../css/common.css?001" />
		<link rel="stylesheet" href="../css/templet.css?001" />
		<link rel="stylesheet" href="../fonts/font-awesome.min.css?001" />
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link href="../css/mui.picker.min.css" rel="stylesheet" />
		<link href="../css/mui.poppicker.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/mycommon.css" />
		<!--公共部分-->
		<style>
			body {
				padding-top: 0.9rem;
			}
			
			.login-box.inp {
				margin: 0;
			}
			/*.center.fiex1{margin-right: 8rem;}*/
			
			p {
				margin-bottom: 0;
			}
			
			.item {
				height: 1rem;
			}
			
			.login-box .item {
				padding: 10px 0;
			}
			
			.pad-l-5 {
				padding-left: 30px;
				width: 9rem;
			}
			
			.mui-btn-blue,
			.mui-btn-primary,
			input[type=submit],
			.mui-poppicker-btn-cancel {
				background: #ffba08;
				color: white;
				border: none;
			}
			
			.login-box .inp {
				margin-top: 0.1rem
			}
			
			.fiex2 {
				margin-left: 0.5rem;
			}
			
			#txt {
				padding-top: 0.3rem;
			}
		</style>
	</head>

	<body class="index">
		<!--最外层盒子-->
		<div id="app" class="wrap_body bg-f3" v-cloak>
			<header class="mui-bar mui-bar-nav">
				<a href="javascript:history.go(-1)" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">忘记密码</h1>
			</header>
			<div class="bank45 bg-fff"></div>

			<div class="login-box reg-box bg-fff" id="reg-box">
				<div class="item">
					<span class="icon f-16 pad-l-10"><i class="fa fa-id-badge"></i></span>
					<div class="p fiex">
						<div id="test" class="p1 fiex5">
							<p v-model="ms.prefix" id="txt" class="pad-10 pad-l-5 ellipsis" style="max-width: 9em;">区号</p>
							<em class="fa fa-angle-down aaa"></em>
							<input id="select_country_val" type="hidden" />
						</div>
						<div class="p2 fiex1 center ccc">|</div>
						<div class="p3 fiex5">
							<input class="required inp" v-model="ms.username" data-valid="isNonEmpty" placeholder="请输入手机号" data-error="手机号不可以为空" />
						</div>
					</div>
				</div>
				<div class="item">
					<span class="icon f-22 pad-l-10"><i class="fa fa-mobile"></i></span>
					<div class="p fiex">
						<div class="fiex2"><input class="required inp" type="number" value="" data-valid="isNonEmpty" placeholder="验证码" v-model="ms.code" data-error="验证码不可以为空" /></div>
						<div class="fiex2 f-right pad-r-10">
							<a @click="cli" href="javascript:;" class="bon-yellow" id="send">发送短信</a>
						</div>
					</div>
				</div>
				<div class="item">
					<span class="icon f-16 pad-l-10"><i class="fa fa-unlock-alt"></i></span>
					<div class="p fiex">
						<div class="fiex2"><input class="inp required" placeholder="请输入新密码" type="password" value="" data-valid="isNonEmpty" data-error="密码不可以为空" id="pwd" v-model="ms.password" /></div>
					</div>
				</div>
				<div class="item">
					<span class="icon f-16 pad-l-10"><i class="fa fa-unlock-alt"></i></span>
					<div class="p fiex">
						<div class="fiex2"><input data-matchID="pwd" placeholder="确认新密码 " class="required inp" type="password" data-valid="matchPwd" data-error="两次密码不一致" /></div>
					</div>
				</div>
			</div>
			<div class="error-box pad-t-10 red" id="errortip">
				<span class="mag-r-5"></span>
			</div>
			<div class="mag-t-10 f-16 center">
				<a @click="sub_form()" href="javascript:;" class="bon-yellow  bon" style="padding: 10px; min-width: 8em;">提交</a>
			</div>
		</div>
		<script type="text/javascript" src="../js/jquery.js"></script>
		<script type="text/javascript" src="../js/ajax.js"></script>
		<script type="text/javascript" src="../js/main.js"></script>
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<!--组件-->
		<script type="text/javascript" src="../js/mui.picker.js"></script>
		<script type="text/javascript" src="../js/mui.poppicker.js"></script>
		<script type="text/javascript" src="../js/jquery-validate.js"></script>
		<script>
			$(function() {
				//表单验证
				$('#reg-box').validate({
					selectID: "#errortip" //指定弹出位置
				});
				let ti = 60,
					toggle = true;
				var app = new Vue({
					el: "#app",
					data: {
						Language: {},
						birthday: "2010-1-1",
						ms: {
							username: "",
							password: "",
							code: "",
							prefix: "",
						},
					},
					methods: {
						Langes: function(v) {
							$.ajax({
								type: "get",
								dataType: "json",
								url: "../Langue/" + v + ".json",
								success: function(h) {
									app.Language = h;
								},
								error: function(e) {
									console.log("错误");
								}
							});
						},
						reg: function() {
							re_ajax(app.ms, "zh", function(h) {
								if(h.status) {
									$(window).attr("../login/login.html");
								} else {
									alert(h.msg);
								}
							})
						},
						cli: function() {
							if(toggle) {
								let dat = {};
								dat.prefix = app.ms.prefix;
								dat.username = app.ms.username;
								re_ajax("send_reg_code", dat, "zh", function(h) {
									if(!h.status) {
										alert(h.msg);
									} else {
										if(toggle) { //计时结束重新发送
											function show() { //开始计时的方法
												ti--;
												$("#send").text("(" + ti + ")s");
												if(ti == 0) {
													ti = 60;
													clearInterval(time);
													toggle = true;
													$("#send").text("发送短信");
												}
											}
										}
										var time = setInterval(show, 1000);
										toggle = false;
									}
								})
							}
						},
						sub_form: function() {
							if($('#reg-box').validate('submitValidate')) {
								re_ajax("put_member_reg", app.ms, "zh", function(h) {
									if(!h.status) {
										alert(h.msg);
									} else {
										alert("注册成功");
										$(window).attr("location", "login.html");
									}
								});
							}
						}
					}
				})
				//首次加载语言
				if(localStorage.getItem("lanuage")) {
					app.Langes(localStorage.getItem("lanuage"));
				} else {
					app.Langes("en");
				}
				window.app = app;
			});
			(function($, doc) {
				$.init();
				//***************************mui组件*******************************//
				$.ready(function() {
					//普通示例
					var userPicker = new $.PopPicker();
					userPicker.setData(reg_datas);
					var showUserPickerButton = doc.getElementById('test');
					showUserPickerButton.addEventListener('tap', function(event) {
						userPicker.show(function(items) {
							doc.getElementById("txt").innerText = items[0].value;
							app.ms.prefix = items[0].value;
						});
					}, false);

				});
				//***************************结束*******************************//
			})(mui, document);
		</script>
	</body>

</html>